<script setup>
import { getDepositOrderList } from '@/api/my';

//响应式数据
const orderData = ref([]);
const showNoData = ref(false);
const scrollHeight = ref(0);
const page = ref(1);
const limit = ref(10);
const isLoading = ref(false);
const timer = ref(null);

// 复制押金订单号
const copyText = (text) => {
  console.log('复制押金订单----->text', text);
  uni.setClipboardData({
    data: text,
    success: () => {
      uni.showToast({
        title: '复制押金号成功'
      });
    }
  });
};

// 获取页面高度
const setScrollHeight = () => {
  const windowHeight = uni.getSystemInfoSync().windowHeight;
  const windowWidth = uni.getSystemInfoSync().windowWidth;
  scrollHeight.value = (windowHeight * 750) / windowWidth - 90 - 30;
};

//下拉加载更多
const lower = () => {
  if (!isLoading.value) {
    isLoading.value = true;
    clearTimeout(timer.value);
    timer.value = setTimeout(() => {
      initData();
    }, 1500);
  }
};

// 加载押金订单数据
const initData = async () => {
  try {
    const res = await getDepositOrderList(page.value, limit.value);
    console.log('getDepositOrderList------>加载押金订单数据', res);
    if (!res || res.data.length === 0) {
      showNoData.value = true;
      return;
    }
    orderData.value = [...orderData.value, ...res.data];
    page.value += 1;
    isLoading.value = false;
  } catch (error) {
    console.error('加载押金订单数据错误:', error);
    isLoading.value = false;
  }
};

//跳转押金详细
const detail = (item) => {
  uni.navigateTo({
    url: `/pages/securityDetail/securityDetail?id=${item.id}`
  });
};

/**
 * 生命周期函数--监听页面加载
 */
onLoad(() => {
  initData();
  setScrollHeight();
});
</script>

<template>
  <view>
    <scroll-view scroll-y @scrolltolower="lower" :style="{ height: scrollHeight + 'rpx' }">
      <uni-card v-for="(item, index) in orderData" :key="item.id + '-' + index" @click="detail(item)">
        <!-- 订单号 -->
        <view class="order_number">
          <text class="title">{{ item.is_refund ? '提现订单' : '押金订单' }} {{ item.uuid }}</text>
          <text class="copy" @click.stop="copyText(item.uuid)">复制</text>
        </view>
        <!-- 订单状态 -->
        <view class="order_status" id="{{item.id}}">
          <text v-if="item.is_buy" style="color: #000; font-weight: bold; font-size: 35rpx">已购买</text>
          <text v-else-if="item.is_refund" style="color: #000; font-weight: bold; font-size: 35rpx">已提现</text>
          <text v-else style="color: #000; font-weight: bold; font-size: 35rpx">已缴纳</text>
          <!-- 押金金额 -->
          <view class="deposit_amount">
            <text class="amount">￥</text>
            <text class="serial_money">{{ item.security_fee }}</text>
          </view>
        </view>
        <!-- 支付时间 -->
        <view class="payment_time">
          <text class="time">支付时间</text>
          <text class="serial_data">{{ item.create_timeFormat }}</text>
        </view>
        <!-- 支付流水 -->
        <view class="payment_statement">
          <text class="statement">支付流水</text>
          <text class="serial_number">{{ item.pay_uuid }}</text>
        </view>
      </uni-card>
      <view v-if="showNoData" style="margin-top: 40rpx; text-align: center; font-size: 34rpx">暂无数据哦!</view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
// 定义变量
$light-color: #ececec;
$text-color: #000;
$primary-color: #2185f5;
$border-color: #c8c4c1;

// 通用样式
%flex-space-between {
  display: flex;
  justify-content: space-between;
}

%text-style {
  font-size: 30rpx;
  color: $text-color;
}
// 页面样式
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: $light-color;
}
// 卡片样式
.uni-card {
  padding: 0rpx !important;
  border-radius: 20rpx !important;
  // 订单号样式
  .order_number {
    @extend %flex-space-between;
    margin-bottom: 20rpx;
    .title {
      margin-top: 10rpx;
      font-size: 34rpx;
      color: $text-color;
    }
    .copy {
      margin-left: 14rpx;
      padding: 8rpx;
      @extend %text-style;
      font-weight: bold;
      border: 2rpx solid $border-color;
    }
  }
  // 订单状态
  .order_status {
    @extend %flex-space-between;
    margin-bottom: 20rpx;
    .status {
      font-weight: bold;
      font-size: 35rpx;
      color: $text-color;
    }
    .deposit_amount {
      display: flex;
      align-items: center;

      .amount,
      .serial_money {
        font-weight: bold;
        font-size: 35rpx;
        color: $primary-color;
      }
    }
  }
  //支付时间
  .payment_time {
    @extend %flex-space-between;
    margin-bottom: 20rpx;

    .time,
    .serial_data {
      @extend %text-style;
    }
  }
  //支付渠道
  .payment_channel {
    @extend %flex-space-between;
    margin-bottom: 20rpx;

    .channel,
    .serial_wx {
      @extend %text-style;
    }
  }
  //支付流水
  .payment_statement {
    @extend %flex-space-between;
    margin-bottom: 20rpx;

    .statement,
    .serial_number {
      @extend %text-style;
    }
  }
}
</style>
